<template>
    <div class="goods_section">
        <div class="top">
            <div class="w">
                <el-breadcrumb class="bread" :separator-icon="ArrowRight">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>全部商品</el-breadcrumb-item>
                    <el-breadcrumb-item>分类</el-breadcrumb-item>
                    {{total}}{{goodsList.length}}
                </el-breadcrumb>
                <!-- 分类 -->
            </div>
        </div>
        <section class="clearfix">
            <div class="w">
            <b class="fl cart">分类</b>
            <div class="bgc"></div>
                <el-tabs
                    v-model="activeName"
                    type="card"
                    class="demo-tabs"
                    @tab-click="handleClick"
                    > 
                    <el-tab-pane label="全部" :name="0">
                        <div class="box">
                            <CateCard :width="'19%'" :margin="'5px'" :data="goodsList"></CateCard>
                        </div>
                        <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next"  :total="total" />
                    </el-tab-pane>
                     <el-tab-pane v-for="(item, index) in cartList" :key="item.category_id" :label="item.category_name" :name="item.category_id">
                        <div class="box">
                            <CateCard :width="'19%'" :margin="'10px 0'" :data="goodsList"></CateCard>
                        </div>
                        <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange" layout="prev, pager, next" v-model:currentPage="params.currentPage"
      v-model:page-size="params.pageSize" :total="total" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </section>
    </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import CateCard from '@/components/CateCard.vue'
import { ref ,onMounted,reactive } from 'vue'
import { getGoods,getPages } from '@/utils/goods.js'
import { getBannerList,getPhoneList,getElectricalList } from '@/utils/home.js'
const activeName = ref(0);
const cartList = ref([]);
const total = ref(0);
const params = reactive({
    currentPage:1,
    pageSize:15
})

const handleClick = async (event) => {
//   console.log(event.props.label)
  if(event.props.label == '全部'){
      return getPage();
  }
    let obj = {categoryName:event.props.label}
    let data = await getPhoneList(obj);
    goodsList.value = data.Product;  
    console.log(data);
}
const handleCurrentChange = (val) => {
    params.currentPage = val;
    if(activeName.value == 0){
        getPage(); 
    }else{
        handleClick;
    }
  console.log(`current page: ${val}`)
}
const goodsList = ref([]);
const getCate = async ()=>{
    let data = await getGoods();
    cartList.value = data.category;
    total.value = goodsList.value.length;
    console.log(data);
}
const getPage = async ()=>{
    let data = await getPages(params);
    total.value = data.total;
    goodsList.value = data.Product;
    console.log(data);
}
onMounted(() => {
    getCate();
    getPage();
})
</script>
<style lang="scss" scoped>
    .top{
        width: 100%;
        .w{
            .bread{
                font-size: 16px;
                margin: 20px 0;
            }
        }
    }
    .cart{
        margin-right: 15px;
        margin-top: 10px;
        z-index: 999;
    }
    section{
        width: 100%;
        background: rgb(236, 236, 236);
        position: relative;
        padding-bottom: 20px;
    }
    .bgc{
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        height: 55px;
        width: 100%;
    }
    .el-tabs{

    }
    .box{
        background: rgb(236, 236, 236);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        // justify-content: space-between;
    }
</style>